<template>
	<view class="box">
		<image class="bg_img" src="../../static/image/user/k@2x.png" mode="widthFix"></image>
		<view class="content bg_fff hidden">
			<view class="content_top">
				<image src="../../static/image/index/d1@2x.png" mode="widthFix" class=""></image>
				<view class="content_top_center flex7">
					<view>
						<view class="font_58 text_bold color_fff">邀请3位好友</view>
						<view class="bg_fff content_line"></view>
						<view class="font_58 text_bold color_fff flex3">赚<view class="color_ffbb00 font_69"
								style="margin: 0 5rpx;">{{discount_num}}折</view>优惠券</view>
					</view>
				</view>
			</view>
			<view class="flex7">
				<view class="flex7" v-for="(item, index) in share_list" :key="index">
					<view class="block">
						<view class="block_top_wrapper">
							<image src="../../static/image/index/e1@2x.png" class="block_top"></image>
							<view class="font_23 text_bold">邀请第{{index + 1}}位</view>
						</view>
						<view class="block_head_img active">
							<image :src="item.avatar"></image>
						</view>
					</view>
					<image src="../../static/image/index/g1@2x.png" class="invite_line" v-if="index !== 2"></image>
				</view>
				<view class="flex7" v-for="(item, index) in 3 - share_list.length" :key="index">
					<view>
						<view class="block_top_wrapper">
							<image src="../../static/image/index/e1@2x.png" class="block_top"></image>
							<view class="font_23 text_bold">邀请第{{share_list.length + index + 1}}位</view>
						</view>
						<view class="block_head_img">
							<image src="../../static/image/index/f1@2x.png"></image>
						</view>
					</view>
					<image src="../../static/image/index/g1@2x.png" class="invite_line"
						v-if="share_list.length + index + 1 !== 3"></image>
				</view>
			</view>
			<button class="btn2" open-type="share">立即邀请</button>
		</view>
		<view class="rule_wrapper color_fff hidden">
			<view class="rule_title font_35 text_bold">活动规则</view>
			<view class="font_27 rule_content">
				<view class="flex1" v-for="(item, index) in rule_list" :key="index">
					<view style="margin-right: 16rpx;">{{index + 1}}. {{item.label}} :</view>
					<view class="w_flex1" v-html="item.des"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rule_list: [],
				share_code: '',
				discount_num: '-', // 折扣
				share_list: [], // 分享数组
			}
		},
		onLoad() {
			this.getShareCoupon();
			this.get_user_info();
			this.getBaseConfig();
		},
		onShareAppMessage(res) {
			let self = this;
			return {
				title: '邀请3位好友 赚' + self.discount_num + '折优惠券',
				path: '/pages/index/index?share_code=' + self.share_code,
				imageUrl: '',
				desc: '',
				content: '',
				success(res) {

				},
				fail(res) {
					getApp().get_msg('分享失败')
				}
			}
		},
		methods: {
			getShareCoupon() {
				this.$http.get(this.$api.getShareCoupon).then(res => {
					let coupon_list = res.data.coupon;
					let discount_list = [];

					if (coupon_list.length > 0) {
						coupon_list.forEach((n, k) => {
							discount_list.push(Number(n.discount));
						})
					}

					if (discount_list.length > 0) {
						discount_list.sort(function(a, b) {
							return a - b;
						});

						this.discount_num = discount_list[0];
					}

					this.share_list = res.data.share_list;
				})
			},
			get_user_info() {
				this.$http.get(this.$api.getMemberInfo).then(res => {
					this.share_code = res.data.share_code;
				})
			},
			getBaseConfig() {
				this.$http.get(this.$api.getBaseConfig).then(res => {
					let share_rule = res.data.share_rule;

					for (let i in share_rule) {
						this.rule_list.push({
							label: i,
							des: share_rule[i]
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.box {
		background-color: rgba(253, 207, 122, 1);

		.bg_img {
			width: 100%;
		}
	}

	.content {
		width: 700rpx;
		margin: -835rpx auto 0;
		border-radius: 38rpx;
	}

	.content_top {
		margin: 25rpx 0 0;
		position: relative;

		image {
			width: 100%;
		}

		.content_top_center {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			text-align: center;
			position: absolute;
		}

		.content_line {
			width: 324rpx;
			height: 1px;
			margin: 10rpx auto 8rpx;
		}
	}

	.btn2 {
		margin: 73rpx auto;
		width: 608rpx;
	}

	.invite_line {
		width: 41rpx;
		height: 24rpx;
	}

	.block_top {
		width: 196rpx;
		height: 50rpx;
	}

	.block_top_wrapper {
		position: relative;

		view {
			top: 8rpx;
			left: 0;
			right: 0;
			bottom: 0;
			color: #fff;
			text-align: center;
			position: absolute;
		}
	}

	.block_head_img {
		width: 142rpx;
		height: 142rpx;
		overflow: hidden;
		margin: -33rpx auto 0;
		border-radius: 50%;

		&.active {
			box-sizing: border-box;
			border: 6rpx solid #FDC400;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.rule_title {
		text-align: center;
		margin: 73rpx 0 69rpx;
	}

	.rule_content {
		padding: 0 46rpx;
		margin-bottom: 50rpx;
	}
</style>
